<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="../resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="../resources/css/shop-homepage.css" rel="stylesheet">
    <script type="text/javascript" src="../resources/js/jquery-2.1.3.js" async='async'></script>
    <script type="text/javascript" src="../resources/js/bootstrap.min.js" async='async'></script>
    <title>Shop Homepage</title>
  </head>
  
  <script type="text/javascript" th:inline="javascript">
	/*<![CDATA[*/
	  var context = [[@{/}]];
	/*]]>*/
	function renewPage() {
		var sort = document.getElementById("productSorting").value;
		var size = document.getElementById("pageSizing").value;
		var url = window.location.pathname + "?page=0&size=" + size + "&sort=" + sort;
	    $("#allProducts").load(url);
	}
  </script>

  <body>
  
    <div th:replace="fragments :: header"></div>
    
    <!-- Page Content -->
    <div class="container">
        <div class="row">
    
           	<div class="col-md-3" th:include="fragments :: categories"></div>
    
           	<div class="col-md-9">

                <div class="row carousel-holder">
                    <div class="col-md-12">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">
                                    <img class="slide-image" src="http://placehold.it/800x300" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="http://placehold.it/800x300" alt="">
                                </div>
                                <div class="item">
                                    <img class="slide-image" src="http://placehold.it/800x300" alt="">
                                </div>
                            </div>
                            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="row carousel-holder">
                	<div class="form-group col-xs-6">
	                	<label for="productSorting">Sort By</label>
	                	<select id="productSorting" class="form-control" onchange="renewPage()">
							<option value="bestseller">Bestseller</option>
							<option value="rating">Rating</option>
							<option value="price,ASC">Price: Low to High</option>
							<option value="price,DESC">Price: High to Low</option>
							<option value="name,ASC">Name: A-Z</option>
							<option value="name,DESC">Name: Z-A</option>
						</select>
					</div>
					
					<div class="form-group col-xs-6 pull-right">
	                	<label for="pageSizing">Page Size</label>
						<select id="pageSizing" class="form-control" onchange="renewPage()">
							<option value="6">6</option>
							<option value="9">9</option>
							<option value="12">12</option>
						</select>
					</div>
				</div>
                
                <div class="row" id="allProducts" th:fragment="allProducts">
				
					<div th:each="product : ${page.content}">
					
	                    <div class="col-sm-4 col-lg-4 col-md-4">
	                        <div class="thumbnail">
	                            <img th:src="@{/resources/img/products/{id}.jpg (id=${product.id}) }" alt="">
	                            <div class="caption">
	                                <h4 class="pull-right" th:text="${'€' + product.price}">€599.95</h4>
	                                <h4><a href="#" th:text="${product.name}">iPhone 5</a>
	                                </h4>
	                                <p th:text="${product.description}">Here comes the product description.</p>
	                            </div>
	                            <div class="ratings">
	                                <p class="pull-right" th:text="${product.feedbackCount + ' reviews'}">15 reviews</p>
	                                <p>
                                    	<span th:if="${product.star} > 0" class="glyphicon glyphicon-star" th:each="i : ${#numbers.sequence(1, product.star)}"></span>
                                    	<span th:if="${product.star} < 5" class="glyphicon glyphicon-star-empty" th:each="i : ${#numbers.sequence(1, 5 - product.star)}"></span>
	                                </p>
	                            </div>
	                        </div>
	                    </div>
	                    
	                </div>
	                
	                <div th:if="${page.totalPages} > 1">
                    	<div th:replace="fragments :: pagination"></div>
                	</div>
                    
                </div>
                

    
   			</div>
   			
   		</div>
    </div>
    <!-- /.container -->
    
	<div th:replace="fragments :: copy"></div>
  
  </body>
  
</html>